@dockWidth: 36px;
@dockTitleMargin: 3px;
@dockPanelWidth: (768px / 2);
@dockTitleFontSize: 11px;

/**
 * This styles the H2 node the dock creates to test the width before making its title rotation.
 * We need to apply these EXACT styles to the #dock .dockedtitle h2 to be sure things are spaced correctly.
 */
.transform-test-heading {
  font-family: @sansFontFamily;
  font-size: @dockTitleFontSize;
  line-height: @dockWidth;
  text-align: center;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

body.has_dock {
  #page {
    padding-left: (@dockWidth + (@dockTitleMargin * 3));
  }
  div#dock {
    display: inline;
  }
}

#dock {
  width: (@dockWidth + (@dockTitleMargin * 2));
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  background-color: transparent;
  border-right: 0 none;
  .nothingdocked {
    visibility: hidden;
    display: none;
  }
  .dockeditem_container {
    margin-top: 68px;
  }
  .dockeditem .firstdockitem {
    margin-top: 1em;
  }
  .dockedtitle {
    .btn;
    display: block;
    width: @dockWidth;
    margin: @dockTitleMargin;
    padding: 0;
    cursor: pointer;
    h2 {
      .transform-test-heading;
    }
    .filterrotate {
      margin-left: 8px;
    }
  }
  .controls {
    position: absolute;
    bottom: 1em;
    text-align: center;
    width: 100%;
    img {
      cursor: pointer;
    }
  }

  // Hide the move icon for blocks which are docked.
  .editing_move,
  .moodle-core-dragdrop-draghandle {
    display: none;
  }

}

#dockeditempanel {
  z-index: 12000; /** Required to place the dock panel above the fixed pos navbar */
  &.dockitempanel_hidden {
    display: none;
  }
  min-width: 200px;
  position: relative;
  left: 100%;
  padding-left: 5px;
  .dockeditempanel_content {
    background-color: @wellBackground;
    width: @dockPanelWidth;
    border: 1px solid darken(@grayLighter, 10%);
    .box-shadow(2px 4px 4px 2px @grayLighter);
    .border-radius(4px);
  }
  .dockeditempanel_bd {
    overflow: auto; /** Required to make the content scrollable when it flows over the fixed area of the screen */
    > * {
      margin: 1em;
    }
    .block_navigation .block_tree li {
      overflow: visible;
    }
  }
  .dockeditempanel_hd {
    border-bottom: 1px solid @white;
    padding: 0.5em 1em;
    h2 {
      .nav-header;
      font-size: 1.1em;
      padding: 0;
      margin: 0;
    }
    .commands {
      display: block;
      text-align: right;
      > a,
      > span {
        margin-left: 3px;
        cursor: pointer;
      }
      img,
      input {
        vertical-align: middle;
        margin-right: 1px;
      }
      .hidepanemicon img {
        cursor: pointer;
      }
    }
  }
}

.dir-rtl {
  &.has_dock #page {
    padding-left: 0;
    padding-right: (@dockWidth + (@dockTitleMargin * 3));
  }
  #dock {
    left: auto;
    right: 0%;
    .dockedtitle {
      h2 {
        line-height: @dockWidth - @dockTitleFontSize;
      }
    }
  }
  #dockeditempanel {
    right: 100%;
    .dockeditempanel_hd {
      .commands {
        text-align: left;
      }
    }
  }
}
